<template>
  <div style="width: 100%">
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="水果ID"
          min-width="10%">
      </el-table-column>
      <el-table-column
          prop="name"
          label="水果名称"
          min-width="20%">
      </el-table-column>
      <el-table-column
          prop="sale"
          label="水果销量"
          min-width="20%">
      </el-table-column>
      <el-table-column
          prop="icon"
          label="图片"
          min-width="25%">

        <template slot-scope="scope">
          <img :src="scope.row.icon" style="height: 70px"/>
        </template>

      </el-table-column>
      <el-table-column
          label="操作"
          min-width="25%">
        <template slot-scope="scope">
          <el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="findFruit(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    findFruit(object) {
      this.$router.push('/edit?id=' + object.id)
    },
    fruitDelete(object) {

      let _this = this

      this.$confirm('是否确定要删除' + object.name + '？', '删除数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        axios.delete('http://localhost:8181/fruit/delete/' + object.id).then(function (response) {
          if (response.data) {
            _this.$alert(object.name + '删除成功！', '删除数据', {
              confirmButtonText: '确定',
              callback: action => {
                //跳转到/table
                location.reload()
              }
            });
          }
        })

      }).catch(() => {

      });

    }
  },
  created() {
    let _this = this
    axios.get('http://localhost:8181/fruit/list').then(function (response) {
      _this.tableData = response.data
    })
  },
  data() {
    return {
      tableData: null
    }
  }
}
</script>